@import './_commonx/commonfunc'
@import './_commonx/css/index'
@import './_commonx/config/iconfont'
@import './_commonx/css/icon'
@import './_commonx/css/list'
//提示框
@import './_commonx/css/tips'
//form表单
@import './_commonx/modules/form/index'
//modal
@import './_commonx/modules/modal'
@import './_commonx/css/_animate'
//加载动画
@import './_commonx/modules/load/index'
//tabs组件
@import './_commonx/modules/tabs/index'

//页面布局选择模板
@import './_commonx/cssFunc/pages/adminrouter'


[title='站长统计']
  font-size: 12px
  color: #fff
  opacity: 0


ss-admin('.router-body', $menusClass: '>.list-body')
ss-root-header('.router-header', $class2: '&')


.pages-drawer
  ss-display-flex(column)
  height: 100%
  .item-head
    height: 80px
    border-left: none
    padding: var(--space, $space)
    border-bottom: 1px solid;
    box-sizing: border-box;
    line-height: initial;
  .item-body
    flex: 1

.admin-logo
  justify-content: space-between
  .item-pic
    width: 55px
    height: @width
    margin-right: 10px
    ss-display-flex(row, center, center)
    img
      width: 100%
  .item-title
    font-size: 22px
    white-space: nowrap

.menus-foot
  position: relative
  z-index: 2
  box-shadow: $box-shadow 
  background: #fff
.menus-footer
  ss-display-flex(row nowrap, space-between, center)
  height: 56px
  font-size: 30px
  >.item
    cursor: pointer
    flex: 1
    text-align: center
    &:hover
      color: $color-primary
  .item-qq
    &:before
      content: '\e614'
  .item-github
    a
      &:before
        content: '\e677'
  .item-saui
    &:before
      content: '\e605'
  .item-code
    &:before
      content: '\e63e'
      // background: url('/images/logo.png')

.router-page
  text-align: justify

.ss-modal
  &.item-img
    max-height: 80%
    max-width: 80%
    .item-body
      overflow: hidden
    img
      border-radius: $br-lg
      display: block
      width: 100%
      height: 100%
  &.item-ad
    padding: 20px 40px
    .item-pic
      img
        width: 200px
        height: @width
        border: 1px solid $color-line
        border-radius: $br
        box-sizing: border-box;
        padding: 10px;
        display: block;
        margin: auto
      .htitle
        margin: 7px 0 13px
        text-align: center
        font-size: 16px
        display: block;
    .item-footer
      ss-display-flex()
      background: $color-bg
      box-sizing: border-box
      color: #999
      font-size: 14px
      padding: 6px 10px
      border-radius: $br
    .icon-scan
      font-size: 26px
      margin-right: 14px
  .close-circle-l
    position: absolute
    left : calc(50% - 15px)
    bottom: -80px
    &:before
      font-size: 20px
      width: 30px
      height: @width
      line-height: @width
      border: 1px solid
      border-radius: 100%
      color: #fff
      text-align: center
  .close-circle-2
    position: absolute
    right: 0
    top: -45px
    &:before
      font-size: 20px
      width: 30px
      height: @width
      line-height: @width
      border: 1px solid
      border-radius: 100%
      color: #fff
      text-align: center
    &:hover
      &:before
        background: fade-out(#000, .7)
        color: #fff
  &.modal-2
    margin-top: 22vh

.icon-nav
//   display: none
  margin-right: var(--space, $space)
.icon-scan
  &:before
    content: '\e608'


.like-search
  color: $color-text-placeholder
  line-height: 18px
  min-width: 200px;
  border-left: 1px solid;
  padding-left: 16px;
  &:before
    content: '\e7b0'
    font-size: 16px
    margin-right: 6px

@media (max-width: 768px)
  // $space = 15px
  :root {
    --space: 15px
    --menusHeight: 50px
  }
  // .icon-nav
  //   display: block
  //   margin-right: var(--space)
  *
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  .router-container
    .list-body, .menus-foot
      position: relative
      z-index: 1
    .list-body
      flex: 1
    .router-menus
      opacity: 0
      width: 0
      margin-right: 0
      transition: all .2s ease-in-out
      // &.active
      //   opacity 1
      //   width: 50%
      //   position: relative
      //   z-index: 2
      //   // transform: translateX(-100%)
      //   .covering
      //     &:before
      //       content: ''
      //       position: fixed
      //       top: 0
      //       left 0
      //       width: 100%
      //       height: 100vh
      //       background: fade-out(#000, .7)
      //   ~.router-page
      //     position: relative
      //     z-index 1
      //     // transform: translateX(-100px)
    .router-header
      height: var(--menusHeight)
      position: fixed
      top: 0
      left 0
      width: 100%
      z-index 2
      transition: all .2s ease-in-out
      &.activeSwitch
        .item-nav
          display: none
        ~.router-body
          .router-menus
            opacity 1
            width: 50%
            position: relative
            z-index: 2
          .covering
            &:before
              content: ''
              position: fixed
              top: 0
              left 0
              width: 100%
              height: 100vh
              background: fade-out(#000, .7)
          ~.router-page
            position: relative
            z-index 1
      &.active
        // transform: translateY(-50px);
        height: 0
        opacity 0
        .item-nav
          bottom: -60px
    .router-body
      position: relative
      z-index 1
    .router-menus
      padding-top: var(--menusHeight)
      -webkit-overflow-scrolling: touch;
    .router-page
      padding-top: 'calc(%s + %s)' % (var(--menusHeight) var(--space))
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box
      flex: 0 0 auto
      width: 100vw
    
    .item-logo
      width: auto
      .item-logo-title
        font-size: 26px
  .admin-header
    .item-nav
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #fff;
      height: 60px;
      line-height: 60px;
      box-shadow: 0px -2px 10px 0px rgba(38,47,64,0.15);
      font-size: 1.3em
      z-index: 99;
      transition: all .2s ease-in-out
      >.item
        flex: 1
        margin-left: 0
        text-align: center
        &.active
          background: fade-out($color-primary, .95)
      // &.active
      //   display: none
  .ss-modal
    &.item-ad
      .item-pic
        img
          width: 160px
          height @width
  .like-search
    border: 1px solid
    height: 30px
    line-height: @height
    padding: 0 4%
    min-width: 15%
    border-radius:(@height / 2)
    margin-right: 4%




ss-list-normal-func('.ss-list-in-block', {$type: 'ib'})